<template>
	<view class="page">
		<view class="address-data">
			<view class="address-list">

				<view class="list">
					<button @click="switchTabs(1)">快递</button>
					<button @click="switchTabs(0)">自取</button>
				</view>

			</view>
			<view class="bar">

			</view>
		</view>
		<!-- 地址 -->
		<view class="address-data" v-if="dataInfo.isexpress == 1">
			<view class="address-list" v-if="dataInfo.user_address_id">
				<view class="list">
					<text>{{addressInfo.address}}</text>
				</view>
				<!-- <view class="list">
					<text class="address">爱建路1333号</text>
				</view> -->
				<view class="list">
					<text>{{addressInfo.name}}</text>
					<text>{{addressInfo.mobile}}</text>
				</view>
			</view>
			
			<view class="address-list" @click="onSkip('address')" v-else>
				<view class="list">
					<text>请先设置默认收货地址！</text>
				</view>
				
			</view>
			<view class="bar">

			</view>
		</view>
		<view class="goods-data" v-else>
			<view class="delivery">
				<div class="list">
					<view class="title">姓名</view>
					<view class="content">
						<input v-model="dataInfo.name" type="text" placeholder="请输入姓名">
					</view>
				</div>

				<div class="list">
					<view class="title">电话</view>
					<view class="content">
						<input v-model="dataInfo.phone" type="text" placeholder="请输入电话">
					</view>
				</div>
			</view>
			<view class="address-data">
				<view class="bar"></view>
			</view>
		</view>

		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>

			<view class="" >
				<view class="goods-list">
					<view class="list">
						<view class="thumb">
							<image :src="orderData.title_img"></image>
						</view>
						<view class="item">
							<view class="title">
								<text class="name one-omit">{{orderData.title}}</text>
								
							</view>
							<view class="price-number">
								<view class="price">
									<text>起拍价：￥{{orderData.start_price}}</text>
								</view>
								<view class="price">
									<text>加价幅度：￥{{orderData.add_price}}</text>
								</view>
							</view>
							<!-- <view class="tag">
								<text>支持七天无理由退货</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="delivery">
					<text class="attr" v-for="(el,index) in orderData.attribute" :key="index">{{el._key}} :
						{{el._value}} </text>
				</view>
				
				<view class="delivery">
				

					<div class="list">
						<view class="title">订单备注</view>
						<view class="content">
							<input @input="(event) => valsInput(index, event)" :value="orderData.order_note" type="text"
								placeholder="请输入备注">
						</view>
					</div>
				</view>

			</view>


		</view>
		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品成交价</text>
					</view>
					<view class="price">
						<text>￥{{orderData.now_price}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight" v-if="orderData.express_fee">+￥{{orderData.express_fee}}</text>
						<text class="highlight" v-else>免运费</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>支付方式</text>
					</view>
					<view class="price">
						<text>在线支付</text>
					</view>
				</view>
				<view class="list">
					<view class="title">
						<text>商品合计</text>
					</view>
					<view class="price">
						<text class="highlight">+￥{{allprice}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text>合计：</text>
				<text class="min">￥</text>
				<text class="max">{{allprice}}</text>
				<text class="min">.00</text>
			</view>
			<view class="submit" @click="onSubmit">
				<text>提交订单</text>
			</view>
		</view>
		
	</view>
</template>

<script>

	import {
		orderConfim,
		getUserAddressDefalut,
		getAuctionOrderById,
		saveAuctionOrde
	} from '@/config/api.js';
	export default {
		components: {
			
		},
		data() {
			const goodsInfo = uni.getStorageSync('oderGoodsInfo');
			
			return {
				queryList: {
					id: ''
				},
				dataInfo: {
					isexpress: 1,
					express_fee: 0,
					goodsprice: 0,
					goodsrealprice: 0,
					name: '',
					phone: '',
					user_address_id: null, // 这里是收货地址Id 要动态改
				},
				allprice: 0,
				orderData: {},
				scrollTop: 0,
				addressInfo:{},
				goodsList: [goodsInfo],


			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			console.log(options)
			this.queryList.id = options.oderId;
			getUserAddressDefalut().then(res => {
				if(!res.id) return ;
				// uni.$u.toast('请先添加收获地址');
				this.dataInfo.user_address_id = res.id;
				this.addressInfo = res;
				getAuctionOrderById(this.queryList).then(res => {
					this.orderData = res;
					if(this.dataInfo.isexpress == 1){
						this.allprice = (res.express_fee - 0) + (res.now_price - 0)
					}else{
						this.allprice = res.now_price
					}
					
					// this.addressData = res.addressData;
				})
			})
			
		},
		onShow(){
			
		},
		mounted() {
			

		},
		methods: {
			/**
			 * 提交订单
			 */
			switchTabs(n) {
				this.dataInfo.isexpress = n;
				if(n){
					this.allprice =  (this.orderData.express_fee - 0) + (this.orderData.now_price - 0)
				}else{
					this.allprice = this.orderData.now_price
				}
			},
			valsInput(index, event) {
				this.orderData['note'] = event.detail.value;
			},
		
			onSubmit() {
				if(!this.dataInfo.user_address_id && this.dataInfo.isexpress == 1)return uni.$u.toast('请先添加收获地址');
				if(!this.dataInfo.isexpress){
					if(!this.dataInfo['name']) return uni.$u.toast('name is requet');
					if(!this.dataInfo['phone']) return uni.$u.toast('phone is requet');
					
					this.orderData['name'] = this.dataInfo['name'];
					this.orderData['phone'] = this.dataInfo['phone'];
					this.orderData['is_self_pickup'] = 1;
				}else{
					if(!this.dataInfo.user_address_id) return uni.$u.toast('address is requet');
					this.orderData['is_self_pickup'] = 0;
					this.orderData['user_address_id'] = this.dataInfo.user_address_id;
				}
				this.orderData['status'] = 4;
				// 如果是快递 需要补交 快递费 
				saveAuctionOrde(this.orderData).then(res => {
					uni.navigateTo({
						url: '/moduleD/paiMai/paiMai',
					})
				})

				// uni.redirectTo({
				// 	url: '/moduleB/CashierDesk/CashierDesk',
				// })
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/moduleB/AddressList/AddressList',
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		// height: 100%;
		background-color: #f6f6f6;
		padding-bottom: 180rpx;
	}
	/* 地址 */
	.address-data{
		position: relative;
		padding: 10rpx 4%;
		background-color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
		overflow: hidden;
		.bar{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 10rpx;
			background-color: #CCCCCC;
			background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
			background-size: 72rpx 72rpx;
		}
		.address-list{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				width: 100%;
				height: 60rpx;
				text{
					font-size: 24rpx;
					color: #555555;
					margin-right: 10rpx;
				}
				.address{
					font-size: 32rpx;
					color: #222222;
				}
				.tips{
					color: $base;
				}
			}
		}
	}
	/* 商品 */
	.goods-data{
		padding: 10rpx 4%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		.goods-title{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			text{
				font-size: 26rpx;
				color: #222222;
			}
		}
		.goods-list{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				width: 100%;
				height: 200rpx;
				.thumb{
					display: flex;
					align-items: center;
					width: 30%;
					height: 100%;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}
				.item{
					width: 70%;
					height: 160rpx;
					.title{
						display: flex;
						flex-direction: column;
						// justify-content: center;
						width: 100%;
						height: 80rpx;
						.name{
							font-size: 28rpx;
							color: #222222;
						}
						.attr{
							font-size: 24rpx;
							color: #C0C0C0;
						}
					}
					.price-number{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 60rpx;
						.price{
							display: flex;
							align-items: center;
							text{
								color: $base;
								font-weight: bold;
							}
							.min{
								font-size: 26rpx;
							}
							.max{
								font-size: 32rpx;
							}
						}
						.number{
							display: flex;
							align-items: center;
							text{
								font-size: 26rpx;
								color: #222222;
							}
						}
					}
					.tag{
						display: flex;
						align-items: center;
						width: 100%;
						height: 40rpx;
						text{
							padding: 2rpx 12rpx;
							color: $base;
							border: 2rpx solid $base;
							border-radius: 40rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.delivery{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				.title{
					font-size: 26rpx;
					color: #555555;
				}
				.content{
					display: flex;
					align-items: center;
					height: 40rpx;
					text{
						font-size: 26rpx;
						color: #222222;
					}
					.iconfont{
						// font-size: 24rpx;
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
					.icon-check{
						font-size: 34rpx;
					}
					input{
						height: 80%;
						font-size: 26rpx;
						color: #222222;
						text-align: right;
					}
				}
			}
		}
	}
	/* 订单金额 */
	.order-price{
		width: 100%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.price-list{
			padding: 0 4%;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				.title{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						color: #555555;
					}
				}
				.price{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						font-weight: bold;
						color: #222222;
					}
					.highlight{
						color: $base;
					}
				}
			}
		}
	}
	
	/* 顶部合计提交 */
	.footer-submit{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		padding: 0 4%;
		.price{
			display: flex;
			align-items: flex-end;
			text{
				font-weight: bold;
				color: $base;
			}
			.min{
				font-size: 32rpx;
			}
			.max{
				font-size: 38rpx;
			}
		}
		.submit{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 70rpx;
			background-color: $base;
			border-radius: 70rpx;
			text{
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>